<template>
    <!--首页中间搜索-->
    <div>
        <div class="search-container" id="_j_index_search">
            <div class="search-group">
                <div class="searchtab" id="_j_index_search_tab" style="margin-left: 60px">
                    <ul class="clearfix">
                        <li class="tab-selected" data-index="0"><i></i>全部</li>
                        <li data-index="1"><i></i>酒店</li>
                        <li data-index="2"><i></i>目的地</li>
                        <li data-index="3"><i></i>去旅行</li>
                        <li data-index="4"><i></i>机票</li>
                    </ul>
                </div>
                <!--全部-->
                <div class="searchbar" id="_j_index_search_bar_all">
                    <div class="search-wrapper">
                        <div class="search-input">
                            <input name="q" type="text" placeholder="搜目的地/攻略/酒店/旅行特价" id="_j_index_search_input_all" autocomplete="off">
                        </div>
                    </div>

                    <!--搜索按钮-->
                    <div class="search-button">
                        <a role="button" href="javascript:">
                            <i class="icon-search"></i>
                        </a>
                    </div>
                </div>
                <!--酒店-->
                <div class="searchbar searchbar-hotel hide" id="_j_index_search_bar_hotel">
                    <div class="search-wrapper">
                        <form action="#" method="get">
                            <div class="search-input">
                                <input name="keyword" type="text" placeholder="请输入国家、地区、城市名称" id="_j_index_search_input_hotel" autocomplete="off">
                            </div>
                        </form>
                        <!--入住选择日期-->
                        <div class="search-date" id="_j_check_in">
                            <input type="text" readonly="readonly">
                            <span></span>
                            <i class="icon-cal"></i>
                        </div>
                        <!--离店日期-->
                        <div class="search-date" id="_j_check_out">
                            <input type="text" readonly="readonly">
                            <span></span>
                            <i class="icon-cal"></i>
                        </div>
                    </div>
                    <!--搜索按钮-->
                    <div class="search-button" id="_j_index_search_btn_hotel">
                        <a role="button" href="#">
                            <i class="icon-search"></i>
                        </a>
                    </div>
                </div>

                <!--目的地-->
                <div class="searchbar hide" id="_j_index_search_bar_mdd">
                    <form action="#" method="get">
                        <div class="search-wrapper">
                            <div class="search-input">
                                <input name="q" type="text" placeholder="我要去..." id="_j_index_search_input_mdd" autocomplete="off">
                            </div>
                        </div>
                        <!--按钮-->
                        <div class="search-button">
                            <a role="button" href="javascript:">
                                <i class="icon-search"></i>
                            </a>
                        </div>
                    </form>
                </div>

                <!--去旅行-->
                <div class="searchbar hide" id="_j_index_search_bar_sales">
                    <div class="search-wrapper">
                        <div class="search-input">
                            <input type="text" placeholder="产品名称/目的地/优惠" id="_j_index_search_input_sales" autocomplete="off">
                        </div>
                    </div>
                    <div class="search-button">
                        <a role="button" href="javascript:"><i class="icon-search"></i></a>
                    </div>
                </div>
                <!--机票-->
                <div class="searchbar hide search-flight" id="_j_index_search_bar_flight">
                    <div class="search-wrapper">
                        <div class="search-input flight-start">
                            <input name="startcity" type="text" placeholder="出发城市" id="_j_index_search_input_flight_start" autocomplete="off">
                        </div>
                        <div class="search-input flight-end">
                            <input name="endcity" type="text" placeholder="到达城市" id="_j_index_search_input_flight_end" autocomplete="off">
                            <img class="search-input-exchange" id="_j_index_search_flight_exchange_btn" src="https://b4-q.mafengwo.net/s13/M00/E6/80/wKgEaVy1QDmAJy1YAAAC0ZrtOdM370.png" />
                        </div>
                        <div class="search-input search-date">
                            <input id="_j_start_date" type="text" readonly="readonly">
                            <i class="icon-cal"></i>
                        </div>
                    </div>
                    <!--搜索按钮-->
                    <div class="search-button">
                        <a role="button" href="javascript:"><i class="icon-search"></i></a>
                    </div>
                </div>

                <!--热门城市面板-->
                <div class="hot-city-layer" id="departCityLayerPop" style="display: none;"></div>
                <div class="hot-city-layer dest-city-warper" id="destCityLayerPop" style="display: none;"></div>
                <!-- 机票 end -->

                <!--搜索建议面板-->
                <!--目的地-->
                <div class="search-suggest-panel search-suggest-place hide">
                    <ul class="suggest-list"></ul>
                </div>
                <!--目的地-->
                <!--酒店-->
                <div class="search-suggest-panel search-suggest-hotel hide">
                </div>
                <!--酒店-->
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SearchContainer",
        data(){
            return{
                value1: "",
                i: 0
            };
        },
        methods:{
/*            checkbox(num){
                alert("你大爷");
                var i = this.i;
                this.b = document.getElementsByClassName("tab-list");
                this.bb = document.getElementsByClassName("searchbar");
                // console.log(this.b);
                // console.log(this.bb);
                if (num == 0) {
                    for (i = 0; i <= this.b.length - 1; i++) {
                        this.b[i].className = "tab-list";
                        this.bb[i].style.display = "none";
                    }
                    this.b[num].className = "tab-list tab-selected";
                    this.bb[num].style.display = "block";
                } else if (num == 1) {
                    for (i = 0; i <= this.b.length - 1; i++) {
                        this.b[i].className = "tab-list";
                        this.bb[i].style.display = "none";
                    }
                    this.b[num].className = "tab-list tab-selected";
                    this.bb[num].style.display = "block";
                } else if (num == 2) {
                    for (i = 0; i <= this.b.length - 1; i++) {
                        this.b[i].className = "tab-list";
                        this.bb[i].style.display = "none";
                    }
                    this.b[num].className = "tab-list tab-selected";
                    this.bb[num].style.display = "block";
                } else if (num == 3) {
                    for (i = 0; i <= this.b.length - 1; i++) {
                        this.b[i].className = "tab-list";
                        this.bb[i].style.display = "none";
                    }
                    this.b[num].className = "tab-list tab-selected";
                    this.bb[num].style.display = "block";
                } else if (num == 4) {
                    for (i = 0; i <= this.b.length - 1; i++) {
                        this.b[i].className = "tab-list";
                        this.bb[i].style.display = "none";
                    }
                    this.b[num].className = "tab-list tab-selected";
                    this.bb[num].style.display = "block";
                }
            }*/
        },
        //自动加载
        create:function () {
                // eslint-disable-next-line no-undef
            /*if (typeof M !== "undefined" && typeof M.loadResource === "function"){
                //eslint-disable-next-line no-undef
                M.loadResource("https://js.mafengwo.net/js/cv/js+Dropdown:js+pageletcommon+pageHeadUserInfoWWWNormal:js+jquery.tmpl:js+M+module+InputListener:js+M+module+SuggestionXHR:js+M+module+DropList:js+M+module+Suggestion:js+M+module+MesSearchEvent:js+SiteSearch:js+AHeader:js+jquery.lazyload:js+M+module+Pagination:js+index+ControllerRecommend:js+M+module+ClickToggle:js+M+module+Slider:js+CitySelectPop:js+xdate:js+hotel+module+FestivalDateConfig:js+jquery-ui-core:js+jquery-ui-datepicker:js+hotel+module+DateRangePicker:js+hotel+module+Datepicker:js+M+module+Storage:js+hotel+module+ModuleProvider:js+hotel+module+BookingDate:js+M+module+dialog+Layer:js+M+module+dialog+DialogBase:js+M+module+dialog+Dialog:js+M+module+dialog+alert:js+hotel+module+Log:js+hotel+module+Search_v2:js+AIndex:js+module+app+Page:js+M+module+Toggle:js+index+AGinfoSearch:js+M+module+PageAdmin:js+M+module+Cookie:js+M+module+ResourceKeeper:js+jquery.jgrowl.min:js+AMessage:js+M+module+FrequencyVerifyControl:js+M+module+FrequencySystemVerify:js+ALogin:js+M+module+ScrollObserver:js+M+module+QRCode:js+AToolbar:js+ACnzzGaLog:js+ARecruit:js+ALazyLoad^YlVUQw^1577348452.js");
            }*/
        }
    }
</script>

<style scoped>

</style>